<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue'
import {
    Expand,
    Fold,
    Avatar,
    Management,
    Shop,
    TrendCharts,
} from '@element-plus/icons-vue';
import { useStore, Info } from '@/pinna/index'
import { useRoute, useRouter } from 'vue-router';
import flight from '../flight/flight.vue'
import userFamily from '../userFamily/userFamily.vue'
import findFeed from '../findFeed/findFeed.vue'
import largeScreen from '../largeScreen/largeScreen.vue'
import { deleteCurrentUser, findCurrentUser, loginOutCurrentUser } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const infoStore = useStore()
let userInfo = infoStore.$state.info
console.log(userInfo);
const handleSelect = async (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
    if (key == '1') return router.push('/')
    if (key == '2-5-1') {
        localStorage.setItem('isLogin', 'false')
        infoStore.$reset()
        isLogin()
        await loginOutCurrentUser().then((res: any) => {
            const { code, msg } = res
            if (code == 0) {
                ElMessage({
                    message: msg,
                    type: 'success'
                })
            } else {
                ElMessage({
                    message: msg,
                    type: 'error'
                })
            }
        })
    } else if (key == '2-5-2') {
        ElMessageBox.confirm(
            '是否确认注销?',
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                await deleteCurrentUser({ id: infoStore.$state.info.id }).then((res: any) => {
                    const { code, msg } = res
                    infoStore.changeState(res.data)
                    if (code == 0) {
                        router.push('/login')
                        ElMessage({
                            message: msg,
                            type: 'success'
                        })
                        infoStore.$reset()
                        isLogin()
                    } else {
                        ElMessage({
                            message: msg,
                            type: 'error'
                        })
                    }
                })
            })

    }
}
// 侧边栏

let isCollapse = ref(false)
let isAllExpend = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const selectMenu = (key: string, keyPath?: string[]) => {
    console.log(key, keyPath)
    localStorage.setItem('defaultKey', key)
    switch (key) {
        case '1':
            currentTab.value = tabs['largeScreen']
            break;
        case '2':
            currentTab.value = tabs['userFamily']
            break;
        case '3':
            currentTab.value = tabs['findFeed']
            break;
        case '8':
            currentTab.value = tabs['flight']
            break;
        default:
            break;
    }
}
// 获取是否登录
const isLogin = () => {
    // if (infoStore.info.username) return
    if (localStorage.getItem('isLogin') == 'true') return
    router.push('/login')
}
isLogin()
const currentTab = shallowRef(flight)

const tabs = {
    'flight': flight,
    'userFamily': userFamily,
    'findFeed': findFeed,
    'largeScreen': largeScreen,
}

// onMounted(async () => {

// })
const getInfoData = async () => {
    await findCurrentUser().then((res: { data: Info }) => {
        console.log(res);
        infoStore.changeState(res.data)
    })
}
getInfoData()
infoStore.$subscribe((state) => {
    console.log(state.events);
})
const collapseHandler = () => {
    isCollapse.value = !isCollapse.value
    isAllExpend.value = !isAllExpend.value

}
// 接收参数
// const route = useRoute()
let defaultIndex = ref("8")
// if (route.query.path == '1') {
//     // defaultIndex.value = "1"
//     // localStorage.setItem('defaultKey', "1")
//     // currentTab.value = tabs['largeScreen']
//     defaultIndex.value = "8"
//     localStorage.setItem('defaultKey', "8")
//     currentTab.value = tabs['flight']
// } else if (route.query.path == '2') {
//     defaultIndex.value = "8"
//     localStorage.setItem('defaultKey', "8")
//     currentTab.value = tabs['flight']
// }

onMounted(() => {
    const defaultKey = localStorage.getItem('defaultKey')
    defaultIndex.value = defaultKey || "8"
    selectMenu(defaultKey!)
})

</script>

<template>
    <div class="common-layout">
        <!-- <button @click="asd">asdasdasd</button> -->
        <el-container>
            <el-header style="padding: 0;">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" default-active="2" text-color="#fff"
                    class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
                    <el-menu-item index="0">
                        <img style="width: 40px" src="../../assets/logo.png" alt="logo" />
                        <h2>航空售票系统</h2>
                    </el-menu-item>
                    <div class="flex-grow" />
                    <el-menu-item index="1">航班信息前台首页</el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>{{ infoStore.$state.info.username }}</template>
                        <el-menu-item index="2-1">角色:{{ infoStore.$state.info.role == 'admin' ? '管理员' : '用户'
                        }}</el-menu-item>
                        <el-menu-item index="2-2">手机号:{{ infoStore.$state.info.phone }}</el-menu-item>
                        <el-menu-item index="2-3">邮箱:{{ infoStore.$state.info.email }}</el-menu-item>
                        <el-menu-item index="2-4">最后登录时间:{{ infoStore.$state.info.lastLoginTime }}</el-menu-item>
                        <el-sub-menu index="2-5">
                            <template #title>退出</template>
                            <el-menu-item index="2-5-1">退出登录</el-menu-item>
                            <el-menu-item index="2-5-2">注销账号</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                </el-menu>
            </el-header>
            <el-container style="height: calc(100vh - 60px);position: relative;">
                <el-aside v-if="currentTab || isCollapse" :width="isCollapse ? '66px' : '200px'" style="overflow: hidden;">
                    <el-menu :default-active="defaultIndex" class="el-menu-vertical-demo" :collapse="isCollapse"
                        @open="handleOpen" @close="handleClose" @select="selectMenu">
                        <el-menu-item index="1">
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <template #title>航空数据大屏</template>
                        </el-menu-item>
                        <el-menu-item index="8">
                            <el-icon>
                                <Management />
                            </el-icon>
                            <template #title>航班信息管理</template>
                        </el-menu-item>

                        <el-menu-item index="2">
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <template #title>角色管理</template>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <el-icon>
                                <Shop />
                            </el-icon>
                            <template #title>服务反馈信息管理</template>
                        </el-menu-item>

                    </el-menu>
                    <div class="collapseIcon" @click="isCollapse = !isCollapse">
                        <el-icon>
                            <Expand v-if="isCollapse" />
                            <Fold v-else />
                        </el-icon>
                    </div>
                </el-aside>
                <el-main>
                    <component :is="currentTab">

                    </component>

                </el-main>
            </el-container>

        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.flex-grow {
    flex-grow: 1;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
}

.el-input {
    margin-right: 5px;
    width: 300px;
}

.query-input {
    display: flex;
    justify-content: center
}

.el-card {
    margin-bottom: 10px;
}

.demo-pagination-block {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.el-menu--collapse {
    height: 100%;
}

.collapseIcon {
    position: absolute;
    bottom: 20px;
    left: 18px;
    font-size: 23px;
}

.collapseIconGolad {
    position: absolute;
    top: 20px;
    left: 18px;
    font-size: 23px;
    color: white;
}

:deep(.el-main) {
    padding: 0 !important;
}
</style>